<template>
  <div class="shop-good">
    <van-nav-bar left-text="积分商城" left-arrow @click-left="this.$router.replace('/shop')" />

    <!-- 图片 -->
    <div class="good-pic">
      <img :src="goodlist.pic ? 'http://192.168.101.65:9000' + goodlist.pic : pic" alt="" />
    </div>
    <!-- 商品详情内容 -->
    <div class="good-introduce">
      <div class="headline">
        <p class="title">{{ goodlist.name }}</p>
        <p class="share" @click="showShare = true"><van-icon name="share-o" /><span>分享</span></p>
        <van-share-sheet
          v-model:show="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </div>
      <div class="detail">
        <p class="price">{{ goodlist.price }} 积分</p>
        <p class="sold">销量 {{ goodlist.sold }}</p>
      </div>
    </div>

    <!-- 保障 -->
    <div class="ensure">
      <p>配送<span>包邮快递</span></p>
      <p>
        库存<span>数量 {{ goodlist.stock }}</span>
      </p>
      <p>
        备注<span>{{ goodlist.remark }}</span>
      </p>
      <div class="address">
        <p class="label">地址</p>
        <p class="value">
          <span>{{ selectedddress.province }}</span>
          <span>{{ selectedddress.detailArea }}</span>
        </p>
        <van-icon name="arrow" class="select" @click="showAddress = true" />
      </div>
    </div>

    <!-- 展示地址的弹出层 -->
    <van-popup v-model:show="showAddress" closeable position="bottom" class="allAddress"
      >选择地址
      <div
        class="card"
        v-for="(item, index) in addresslist"
        :key="item.id"
        @click="onSelectedAddress(index)"
      >
        <p>{{ item.province }}</p>
        <p>{{ item.detailArea }}</p>
      </div>
    </van-popup>

    <!-- 本店热卖 -->
    <div class="hot-sale">
      <h5>热门兑换</h5>
      <div class="hot-content">
        <div class="hot-good" v-for="item in sortlist" :key="item.id">
          <img
            :src="item.pic ? 'http://192.168.101.65:9000' + item.pic : pic"
            alt=""
            class="hot-pic"
          />
          <p class="hot-title">{{ item.name }}</p>
          <p class="hot-price">￥{{ item.price }}</p>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="good-bottom">
      <div class="bottom-left">
        <div class="bottom-icon">
          <van-icon name="chat-o" />
          <span>客服</span>
        </div>
        <div class="bottom-icon">
          <van-icon name="star-o" />
          <span>收藏</span>
        </div>
      </div>
      <div class="bottom-right">
        <button class="now-change" @click="onNowChange">立即兑换</button>
      </div>
    </div>
  </div>
</template>

<script>
import { showToast, showDialog } from 'vant'
import { getSort, getShopGood } from '../../api/shop.js'
import { changeGood } from '../../api/user.js'
import { getAddress } from '../../api/address.js'
export default {
  props: ['id'],
  data() {
    return {
      pic: require('../../assets/image/default.png'),
      // 展示分享框
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' }
      ],
      goodlist: {},
      sortlist: {},
      addresslist: {},
      selectedddress: {},
      user: {},
      // 展示地址
      showAddress: false
    }
  },
  created() {
    this.getGood()
    this.getSort()
    this.getAddress()
  },
  methods: {
    // 得到默认地址
    async getAddress() {
      const { data: res } = await getAddress()
      if (res.code === 1) {
        this.user = JSON.parse(window.sessionStorage.getItem('userInfo'))
        this.addresslist = res.data
        this.selectedddress = this.addresslist[0]
      }
    },
    // 获取积分商品信息
    async getGood() {
      const { data: res } = await getShopGood(this.id)
      if (res.code === 1) {
        this.goodlist = res.data
      } else {
        showToast('获取数据失败！')
      }
    },
    // 热门兑换
    async getSort() {
      const { data: res } = await getSort()
      if (res.code === 1) {
        this.sortlist = res.data.slice(0, 3)
      } else {
        showToast('兑换失败！')
      }
    },
    // 分享面板
    onSelect(option) {
      showToast(option.name)
      this.showShare = false
    },
    // 立即兑换积分
    async onNowChange() {
      const { data: res } = await changeGood(this.goodlist)
      if (res.code !== 1) {
        showDialog({
          message: res.msg
        }).then(() => {
          this.$router.go(-1)
        })
      } else {
        showToast(res.data)
        this.$router.go(-1)
      }
    },
    // 选择地址
    onSelectedAddress(index) {
      this.selectedddress = this.addresslist[index]
      this.showAddress = false
    }
  }
}
</script>

<style lang="less" scoped>
.shop-good {
  width: 100%;
  // height: 100%;
  padding-bottom: 70px;
  background-color: #333;

  .van-nav-bar {
    :deep(.van-icon) {
      color: #55c24d;
    }
    :deep(.van-nav-bar__text) {
      color: #55c24d;
      font-size: 16px;
      font-weight: 500;
    }
  }

  // 图片
  .good-pic {
    width: 100%;
    height: 230px;
    background-color: #fff;

    img {
      width: 100%;
      height: 100%;
    }
  }

  // 商品详情内容
  .good-introduce {
    width: 100%;
    height: 76px;
    background-color: #fff;
    padding: 8px;
    box-sizing: border-box;

    p {
      margin: 0;
    }

    .headline {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .title {
        width: 82%;
        font-size: 16px;
        font-weight: 550;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .share {
        display: flex;
        align-items: center;
        width: 15%;

        .van-icon {
          margin-right: 5px;
        }
      }
    }

    .detail {
      display: flex;
      justify-content: space-between;

      .price {
        font-size: 18px;
        font-weight: 700;
        margin-top: 5px;
        color: #fe4f01;
      }
      .sold {
        margin-top: 7px;
        margin-right: 7px;
        font-size: 13px;
        color: #666;
      }
    }
  }

  // 保障
  .ensure {
    background-color: #fff;
    margin: 14px 0;
    font-size: 14px;
    padding: 8px 0 8px 10px;

    & > p {
      margin: 2px 0;
      span {
        margin-left: 12px;
        color: #666;
      }
    }

    .address {
      position: relative;
      display: flex;
      margin: 5px 0;

      p {
        margin: 0;
      }

      .value {
        display: flex;
        flex-direction: column;
        margin-left: 12px;
        color: #666;
      }

      .select {
        position: absolute;
        bottom: 10px;
        right: 5px;
      }
    }
  }

  // 展示地址的弹出框
  :deep(.van-popup) {
    height: 350px !important;
    padding: 30px;
    background-color: #f3f3f3;
    .card {
      border-radius: 4px;
      padding: 6px 10px;
      margin: 15px 0;
      box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.2);
      background-color: #fff;
      p {
        margin: 8px 0;
      }
    }
  }

  // 本店热卖
  .hot-sale {
    padding: 8px;
    box-sizing: border-box;
    background-color: #fff;

    h5 {
      margin: 5px 0;
      font-family: serif;
    }

    .hot-content {
      display: flex;
      justify-content: space-between;

      .hot-good {
        width: 31%;

        .hot-pic {
          width: 100%;
          height: 90px;
        }

        .hot-title {
          width: 100%;
          margin: 4px 0;
          color: #666;
          font-size: 13px;
        }

        .hot-price {
          margin: 0;
          color: #fe4f01;
        }
      }
    }
  }

  // 底部
  .good-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    background-color: #fff;

    // 左侧有图标内容
    .bottom-left {
      display: flex;
      width: 40%;

      .bottom-icon {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 15px;
        text-align: center;

        .van-icon {
          font-size: 22px;
        }
        span {
          font-size: 14px;
        }
      }
    }

    // 右侧按钮内容
    .bottom-right {
      display: flex;
      align-items: center;
      width: 60%;
      height: 100%;
      margin-right: 10px;

      .now-change {
        width: 100%;
        height: 80%;
        color: #fff;
        border: 0;
        border-radius: 28px;
        background-color: #ff9702;
      }
    }
  }
}
</style>
